<template>
	<view class="content">
		<!-- <permissionPopup></permissionPopup> -->
		<view class="top">
			<view class="box">
				<view class="userinfo">
					<view class="from">
						<view class="from-item">
							<text class="label">
								姓名
							</text>
							<view class="input">
								<u--input placeholder="输入您的姓名" fontSize="20" placeholder-style="color:red;" border="none"
									v-model="idCardForm.real_name" 
									disabledColor="#fff" inputAlign="right"></u--input>
							</view>
						</view>
						<view class="from-item">
							<text class="label">
								身份证号
							</text>
							<view class="input">
								<u--input placeholder="输入您的身份证号" border="none" fontSize="20" placeholder-style="color:red;"
									v-model="idCardForm.id_card" 
									disabledColor="#fff" type="text" inputAlign="right"></u--input>
							</view>
						</view>
						<view class="from-item none-border">
							<text class="label">
								银行卡账号（储蓄卡）
							</text>
							<view class="input">
								<u--input placeholder="输入您的银行卡账号" border="none" fontSize="20" placeholder-style="color:red;"
									v-model="idCardForm.bank_card"
									disabledColor="#fff" type="number" inputAlign="right"></u--input>
							</view>
						</view>
					</view>
				</view>
				<view class="bank">
					<view class="from">
						<view class="from-item from-select">
							<text class="label">
								开户银行
							</text>
							<view class="select" @click="goSelectList">
								<view></view>
								<view class="select-box">
									<view class="select-bank" v-show="idCardForm.bank_open">
										{{ idCardForm.bank_open }}
									</view>
									<view class="select-text" v-show="!idCardForm.bank_open">请选择</view>
									<view class="select-icon">
										<u-icon name="arrow-right"></u-icon>
									</view>
								</view>
							</view>
						</view>
						<view class="from-item">
							<text class="label">
								开户支行
							</text>
							<view class="input">
								<u--input placeholder="输入正确的支行信息" border="none" fontSize="20" placeholder-style="color:red;"
									v-model="idCardForm.bank_branch" 
									disabledColor="#fff" inputAlign="right"></u--input>
							</view>
						</view>
						<view class="from-item none-border">
							<text class="label">
								银行预留手机
							</text>
							<view class="input">
								<u--input placeholder="输入您预留的手机号" border="none" fontSize="20" placeholder-style="color:red;"
									v-model="idCardForm.mobile" 
									disabledColor="#fff" type="number" inputAlign="right"></u--input>
							</view>
						</view>
					</view>
				</view>
				<view class="IDcard">
					<view class="title">
						拍摄并上传
					</view>
					<view class="img">
						<view>
							<view class="idcard_positive_img" v-if="idCardForm.id_card1">
								<view class="delete" @click="deleteImg('positive')"  v-if="!idCardForm.id_card1">
									<u-icon name="close" color="#FFF" size="24rpx" bold></u-icon>
								</view>
								<u--image :showLoading="true" :src="idCardForm.id_card1"
									width="284rpx" height="184rpx"></u--image>
							</view>
							<view class="idcard_positive" @click="openAuth('CAMERA','positive')" v-else>
								<view class="add"></view>
							</view>
							<view class="text">
								证件照信息面
							</view>
						</view>
						<view>
							<view class="idcard_positive_img" v-if="idCardForm.id_card2">
								<view class="delete" @click="deleteImg('negative')" v-if="!idCardForm.id_card2">
									<u-icon name="close" color="#FFF" size="20rpx" bold></u-icon>
								</view>
								<u--image :showLoading="true" :src="idCardForm.id_card2"
									width="284rpx" height="184rpx"></u--image>
							</view>
							<view class="idcard_negative" @click="openAuth('CAMERA','negative')" v-else>
								<view class="add"></view>
							</view>
							<view class="text">
								国徽面
							</view>
						</view>
					</view>
				</view>
				<view class="submit" v-if="!idCardForm.real_name">
					<view class="btn" @click="submitOk">
						保存
					</view>
				</view>
				
			</view>
		</view>
		<yk-authpup ref="authpup" type="top" @changeAuth="changeAuth" :permissionID="permissionID"></yk-authpup>
	</view>
</template>

<script>
	import permissionPopup from '@/components/permissionPopup/permissionPopup.vue'
	import ykAuthpup from "@/components/yk-authpup/yk-authpup";
	import {
		isValidID,
		checkMobile,
		isValidBankCardNumber
	} from '@/utils/index.js'
	export default {
		components: {
			ykAuthpup
		},
		data() {
			return {
				page: '',
				permissionID:'',
				idCardForm: {
					real_name: '',
					id_card: '',
					bank_card: '',
					bank_open: '',
					bank_branch: '',
					mobile: '',
					id_card1: '',
					id_card2: '',
				},
				type:''
			}
		},
		onLoad({
			page
		}) {
			this.getRealname()
		},
		methods: {
			getRealname(){
				this.$api.getrealname().then(res => {
					console.log(res)
					this.idCardForm = res.data
				}).catch(err => {
					this.idCardForm ={}
				})
			},
			openAuth(permissionID,type){
				this.type = type
				this.permissionID = permissionID;//这个是对应的权限 ACCESS_FINE_LOCATION 位置权限 / WRITE_EXTERNAL_STORAGE 存储空间/照片权限 / CAMERA相机权限 / CALL_PHONE 拨打电话
				setTimeout(()=>{
					this.$refs['authpup'].open();
				},500)
			},
			//用户授权权限后的回调
			changeAuth(type){
				//这里是权限通过后执行自己的代码逻辑
				uni.chooseImage({
					count: 1,
					success: (e) => {
						console.log(e)
						uni.uploadFile({
							// url: 'https://app.fjxmlz.com/api/attachment/upload',
							url: 'https://zhaobanma.booster-cloud.cn/admin/addImgDeng',
							filePath: e.tempFilePaths[0],
							name: 'file',
							header: {
								'accessToken': this.$store.state.login.token,
							},
							success: (uploadFileRes) => {
								// console.log(this.type,JSON.parse(uploadFileRes.data))
								if (this.type == 'positive') this.idCardForm.id_card1 = JSON.parse(
									uploadFileRes.data).data.url
								if (this.type == 'negative') this.idCardForm.id_card2 = JSON.parse(
									uploadFileRes.data).data.url
								console.log(this.idCardForm.id_card2)	
							}
						});
					}
				})
			},
			androidCameraPermiss(index) {
				plus.android.requestPermissions(['android.permission.CAMERA'], (e) => {
					if (e.deniedAlways.length > 0) {
						this.androidAuthCamera = false
						// 弹出提示框解释为何需要权限，引导用户打开设置页面开启  
						uni.showModal({
							title: '相册权限说明',
							content: '请允许打开手机相机相册功能，便于您使用该功能上传您的照片/图片/视频及用户实名认证信息、更新头像时上传图片，请您确认授权，否则无法使用该功能',
							// showCancel: false, // 不显示取消按钮
							success(res) {
								if (res.confirm) {
									var Intent = plus.android.importClass("android.content.Intent");
									var Settings = plus.android.importClass(
										"android.provider.Settings");
									var Uri = plus.android.importClass("android.net.Uri");
									var mainActivity = plus.android.runtimeMainActivity();
									var intent = new Intent();
									intent.setAction(Settings.ACTION_APPLICATION_DETAILS_SETTINGS);
									var uri = Uri.fromParts("package", mainActivity.getPackageName(),
										null);
									intent.setData(uri);
									mainActivity.startActivity(intent);
								}
							}
						});
					} else if (e.deniedPresent.length > 0) { //权限被临时拒绝  
						this.androidAuthCamera = false
						// 弹出提示框解释为何需要权限，可再次调用plus.android.requestPermissions申请权限  
						uni.showModal({
							title: '相册权限说明',
							content: '请允许打开手机相机相册功能，便于您使用该功能上传您的照片/图片/视频及用户实名认证信息、更新头像时上传图片，请您确认授权，否则无法使用该功能',
							// showCancel: false, // 不显示取消按钮
							success(res) {
								if (res.confirm) {
									var Intent = plus.android.importClass("android.content.Intent");
									var Settings = plus.android.importClass(
										"android.provider.Settings");
									var Uri = plus.android.importClass("android.net.Uri");
									var mainActivity = plus.android.runtimeMainActivity();
									var intent = new Intent();
									intent.setAction(Settings.ACTION_APPLICATION_DETAILS_SETTINGS);
									var uri = Uri.fromParts("package", mainActivity.getPackageName(),
										null);
									intent.setData(uri);
									mainActivity.startActivity(intent);
								}
							}
						});
					} else {
						plus.android.requestPermissions(['android.permission.READ_EXTERNAL_STORAGE'], (e) => {
							if (e.deniedAlways.length > 0) { //权限被永久拒绝  
								// 弹出提示框解释为何需要权限，引导用户打开设置页面开启  
								uni.showModal({
									title: '相册权限说明',
									content: '请允许打开手机相机相册功能，便于您使用该功能拍摄身份证、头像、等信息，请您确认授权，否则无法使用该功能',
									// showCancel: false, // 不显示取消按钮
									success(res) {
										if (res.confirm) {
											var Intent = plus.android.importClass(
												"android.content.Intent");
											var Settings = plus.android.importClass(
												"android.provider.Settings");
											var Uri = plus.android.importClass("android.net.Uri");
											var mainActivity = plus.android.runtimeMainActivity();
											var intent = new Intent();
											intent.setAction(Settings
												.ACTION_APPLICATION_DETAILS_SETTINGS);
											var uri = Uri.fromParts("package", mainActivity
												.getPackageName(),
												null);
											intent.setData(uri);
											mainActivity.startActivity(intent);
										}
									}
								});
							} else if (e.deniedPresent.length > 0) { //权限被临时拒绝  
								this.androidAuthCamera = false
								// 弹出提示框解释为何需要权限，可再次调用plus.android.requestPermissions申请权限  
								uni.showModal({
									title: '相册权限说明',
									content: '请打开相册存储功能,便于您使用该功能拍摄身份证、头像、等信息，请您确认授权，否则无法使用该功能',
									// showCancel: false, // 不显示取消按钮
									success(res) {
										if (res.confirm) {
											var Intent = plus.android.importClass(
												"android.content.Intent");
											var Settings = plus.android.importClass(
												"android.provider.Settings");
											var Uri = plus.android.importClass("android.net.Uri");
											var mainActivity = plus.android.runtimeMainActivity();
											var intent = new Intent();
											intent.setAction(Settings
												.ACTION_APPLICATION_DETAILS_SETTINGS);
											var uri = Uri.fromParts("package", mainActivity
												.getPackageName(),
												null);
											intent.setData(uri);
											mainActivity.startActivity(intent);
										}
									}
								});
							} else {
								this.androidAuthCamera = true
								// 选择照片 uni.chooseImage() 
								this.chooseImage(index)
							}
						})
					}
				})
			},
			chooseImage(type) {
				uni.chooseImage({
					count: 1,
					success: (e) => {
						uni.uploadFile({
							// url: 'https://app.fjxmlz.com/api/attachment/upload',
							url: 'https://zhaobanma.booster-cloud.cn/admin/addImgWash',
							filePath: e.tempFilePaths[0],
							name: 'file',
							header: {
								'accessToken': this.$store.state.login.token,
							},
							success: (uploadFileRes) => {
								// console.log(uploadFileRes)
								if (type == 'positive') this.idCardForm.id_card1 = JSON.parse(
									uploadFileRes.data).data.url
								if (type == 'negative') this.idCardForm.id_card2 = JSON.parse(
									uploadFileRes.data).data.url
							}
						});
						
					},
					fail: (e) => {
						// if (e.errMsg.includes('No Permission')) this.$store.commit('permissions/goSystemSet', e
						// 	.errCode)
					}
				})
			},
			deleteImg(type) {
				if (type == 'positive') {
					this.idCardForm.id_card1 = ''
				} else if (type == 'negative') {
					this.idCardForm.id_card2 = ''
				}
			},
			submitOk() {
				if (this.idCardForm.real_name == '') {
					uni.showToast({
						title: '姓名不可为空',
						icon: 'none'
					});
					return
				}
				if (this.idCardForm.id_card == '') {
					uni.showToast({
						title: '身份证不可为空',
						icon: 'none'
					});
					return
				}
				if (!isValidID(this.idCardForm.id_card)) {
					uni.showToast({
						title: '请输入正确身份证',
						icon: 'none'
					});
					return
				}
				if (this.idCardForm.bank_card == '') {
					uni.showToast({
						title: '银行卡账号不可为空',
						icon: 'none'
					});
					return
				}
				if (!isValidBankCardNumber(this.idCardForm.bank_card)) {
					uni.showToast({
						title: '请输入正确银行卡账号',
						icon: 'none'
					});
					return
				}
				if (this.idCardForm.bank_open == '') {
					uni.showToast({
						title: '开户银行不可为空',
						icon: 'none'
					});
					return
				}
				if (this.idCardForm.bank_branch == '') {
					uni.showToast({
						title: '开户支行不可为空',
						icon: 'none'
					});
					return
				}
				if (this.idCardForm.mobile == '') {
					uni.showToast({
						title: '银行预留手机号不可为空',
						icon: 'none'
					});
					return
				}
				if (!checkMobile(this.idCardForm.mobile)) {
					uni.showToast({
						title: '请输入正确手机号',
						icon: 'none'
					});
					return
				}
				if (this.idCardForm.id_card1 == '') {
					uni.showToast({
						title: '证件照信息面不可为空',
						icon: 'none'
					});
					return
				}
				if (this.idCardForm.id_card2 == '') {
					uni.showToast({
						title: '国徽面不可为空',
						icon: 'none'
					});
					return
				}
				console.log(this.idCardForm)
				uni.setStorageSync('idCardForm',this.idCardForm)
				this.$api.checkrealname(this.idCardForm).then(res => {
					console.log(res)
					if (this.page) {
						let pages = getCurrentPages()
						let prevPage = pages[pages.length - 2]
						prevPage.$vm.openAuthentication(this.selectedSchedule)
					}
					uni.navigateBack()
					this.$store.commit('user/getReal')
				}).catch(err=>{
					console.log(err)
				})
			},
			goSelectList() {
				if (!this.$store.state.user.isRealName) return
				uni.navigateTo({
					url: '/pages/person/my/selectList'
				})
			},
			bankValue(e) {
				this.idCardForm.bank_open = e
				console.log(this.idCardForm.bank_open);
			}
		}
	}
</script>

<style scoped lang="scss">
	.top {
		padding-top: 20rpx
	}

	.content {
		background: #F5F5F5;
		min-height: 100vh;
		z-index: -1;

		.box {
			padding: 0 30rpx;
		}
	}

	.userinfo {
		height: 420rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
	}

	.bank {
		height: 420rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
	}

	.IDcard {
		height: 414rpx;
		background: #FFFFFF;
		border-radius: 10rpx;

		.title {
			padding-top: 48rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			font-size: 36rpx;
			color: #111111;
			line-height: 44rpx;
			text-align: left;
			font-style: normal;
		}

		.img {
			display: flex;
			justify-content: space-between;
			padding-top: 28rpx;

			.idcard_positive_img,
			.idcard_negative_img {
				width: 284rpx;
				height: 184rpx;
				position: relative;

				.delete {
					width: 30rpx;
					height: 30rpx;
					background-color: red;
					position: absolute;
					right: -10rpx;
					top: -10rpx;
					z-index: 99;
					border-radius: 100%;
					display: flex;
					justify-content: center;
					align-items: center;
				}
			}

			.idcard_positive,
			.idcard_negative {
				width: 284rpx;
				height: 184rpx;
				display: flex;
				justify-content: center;
				align-items: center;

				.add {
					width: 60rpx;
					height: 60rpx;
					background: url('@/static/img/idcard_add.png');
					background-size: 100% 100%;
				}
			}

			.text {
				padding-top: 22rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 32rpx;
				color: #111111;
				line-height: 40rpx;
				text-align: center;
				font-style: normal;
			}

			.idcard_positive {
				background: url('@/static/img/idcard_positive.png');
				background-size: 100% 100%;
			}

			.idcard_negative {
				background: url('@/static/img/idcard_negative.png');
				background-size: 100% 100%;
			}
		}
	}

	.userinfo,
	.IDcard,
	.bank {
		margin-top: 16rpx;
		padding: 0 30rpx;
	}

	.submit {
		padding: 28rpx 0;
		display: flex;
		justify-content: center;

		.btn {
			width: 630rpx;
			height: 84rpx;
			background: linear-gradient(270deg, #EA6F29 0%, #FAAA7D 100%);
			border-radius: 16rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			font-size: 34rpx;
			color: #FFFFFF;
			line-height: 84rpx;
			text-align: center;
			font-style: normal;
		}
	}

	/deep/.placeholderClass {
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 36rpx;
		color: #AAAAAA;
		line-height: 44rpx;
		text-align: right;
		font-style: normal;
	}

	.from {
		display: flex;
		flex-direction: column;
		justify-content: space-around;

		.from-select {
			display: flex;
			justify-content: space-between;
		}

		.from-item {
			padding: 40rpx 0;
			display: flex;
			padding-bottom: 48rpx;
			border-bottom: 2rpx solid #e6e6e6;

			.label {
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 36rpx;
				color: #111111;
				line-height: 44rpx;
				text-align: left;
				font-style: normal;
			}

			.input {
				flex: 1;
				padding-left: 20rpx;
			}

			.select {
				display: flex;
				justify-content: space-between;
				flex: 1;
				padding-left: 20rpx;

				.select-bank {
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 36rpx;
					line-height: 44rpx;
					text-align: left;
					font-style: normal;
					padding-left: 22rpx;
				}

				.select-box {
					display: flex;
					justify-content: end;

					.select-text {
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 36rpx;
						color: #666666;
						line-height: 44rpx;
						text-align: right;
						font-style: normal;
						padding-left: 22rpx;
						flex: 1;
					}

					.select-icon {
						padding-top: 5rpx;
					}
				}
			}
		}

		.none-border {
			border: 0;
		}
	}
</style>